<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>首字母大写</title>
    <!-- 引入下载到本地 Vue.js -->
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 创建一个 div  id 为 app 挂载点 -->
    <div id="app">
      <h1>将字符串首字母大写</h1>
      <input type="text" v-model="str" placeholder="请输入字符串" />
      <p>{{ str | local-filter }}</p>
    </div>

    <!-- 用 javascript 脚本 创建一个 vue 实例 -->
    <script type="text/javascript">
      //注册全局过滤器
      // 注册
      Vue.filter("my-filter", function (value) {
        // 返回处理后的值
        if (!value) return "";
        value = value.toString();
        return value.charAt(0).toUpperCase() + value.slice(1);
      });

      new Vue({
        el: "#app",
        data: {
          str: "",
        },
        // 注册 局部 过滤器
        filters: {
          "local-filter": function (value) {
            if (!value) return "";
            value = value.toString();
            return value.charAt(0).toUpperCase() + value.slice(1);
          },
        },
      });
    </script>
  </body>
</html>
